<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>牧心农业</title>
    <link rel="stylesheet" type="text/css" href="/static/css/eui.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/mobile.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/iconfont.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/doT.min.js"></script>
    <script src="/static/js/area.json"></script>
    <script src="/static/js/func.js"></script>
</head>
<body>
    <div class="content margin_top_foot">
        <header class="header fixed_top bg_mx_green"></header>
        <header class="head_edit text_center fixed_top bg_mx_green lineheight_50 font_16 relative hide" style="z-index:3">编辑地址<span class="absolute iconfont icon-close font_16 padding_h_15" style="top:0;right:0;" onclick="toggle_edit()"></span></header>
        <div class="address_list"></div>
        <form class="edit_address hide" style=""></form>
        <footer class="fixed_bottom bg_white text_center mx_green lineheight_50 font_16 add_btn" onclick="add()">+ 添加新地址</footer>
    </div>
    <div class="toast"></div>
    <!-- toast模版 -->
    <script type="text/template" charset="utf-8" id='toast_template'>
        <i class="iconfont icon-toast{{=it.icon}}"></i>
        <div class="toast_text">{{=it.text}}</div>
    </script>
    <script type="text/template" charset="utf-8" id='address_template'>
        {{for(var i=0;i<it.length;i++){}}
        <div class="bg_white border_b border_t margin_b_10">
            <div class="padding_15 flex border_b v_center">
                <div class="width_50" onclick="set_default({{=it[i].id}})">
                    <input class="checkbox" type="radio" {{if(it[i].isdef==1){}}checked{{}}} name="address">
                </div>
                <div class="left_100 address_select" data-id="{{=it[i].id}}">
                    <div class="flex">
                        <div class="flex_1">{{=it[i].name}}</div>
                        <div class="flex_1">{{=it[i].tel}}</div>
                    </div>
                    <div class="text_info">{{=it[i].province}}{{=it[i].city}}{{=it[i].area}}{{=it[i].address}}</div>
                </div>
                <div class="width_50 danger font_12 text_center">{{if(it[i].isdef==1){}}默认{{}}}</div>
            </div>
            <div class="flex text_center lineheight_1 padding_v_5">
                <div class="flex_1" onclick="del('{{=it[i].id}}')">
                    <span class="iconfont icon-trash"></span>
                    <span class="">删除</span>
                </div>
                <div class="flex_1 border_l" onclick="edit('{{=it[i].id}}')">
                    <span class="iconfont icon-pencil"></span>
                    <span class="">编辑</span>
                </div>
            </div>
        </div>
        {{}}}
    </script>
    <script type="text/template" charset="utf-8" id='info_template'>
        <div class="bg_white">
            <div class="padding_15 flex border_b">
                <div class="width_100">姓名</div>
                <div class="left_100">
                    <input type="text" name="name" value="{{=it.name||''}}" placeholder="请填入姓名" request title="姓名">
                    <input type="hidden" name="id" value="{{=it.id||''}}">
                </div>
            </div>
            <div class="padding_15 flex border_b">
                <div class="width_100">电话号码</div>
                <div class="left_100">
                    <input type="text" name="tel" value="{{=it.tel||''}}" placeholder="请填入电话号码" request title="电话号码" data-pattern="^(0|86|17951)?(13\d|15[0-35-9]|17[678]|18\d|14[57])\d{8}$" data-tips="11位手机号">
                </div>
            </div>
            <div class="padding_15 flex border_b">
                <div class="width_100">省</div>
                <div class="left_100">
                    <select class="select1" name="province" request title="请填写省">
                        <option value="">省</option>
                    </select>
                </div>
            </div>
            <div class="padding_15 flex border_b">
                <div class="width_100">市</div>
                <div class="left_100">
                    <select class="select2" name="city" request title="请填写市">
                        <option value="">市</option>
                    </select>
                </div>
            </div>
            <div class="padding_15 flex border_b">
                <div class="width_100">区</div>
                <div class="left_100">
                    <select class="select3" name="area" request title="请填写区">
                        <option value="">区</option>
                    </select>
                </div>
            </div>
            <div class="padding_15 flex border_b">
                <div class="width_100">详细地址</div>
                <div class="left_100">
                    <textarea name="address" placeholder="请填入详细地址" request title="详细地址">{{=it.address||''}}</textarea>
                </div>
            </div>
        </div>
        <input name="_csrf" type="hidden" id="_csrf" value="<{$app->request->csrfToken}>">
        <div class="padding_15 font_16">
            <button class="btn btn_mx_green all_width lineheight_3">保存</button>
        </div>
    </script>
    <script type="text/template" charset="utf-8" id='area_template'>
        {{if(Object.keys(it.data).length){}}
            {{for(var i in it.data){ }}
                <option value="{{=i}}"{{ if(it.val==i){ }}selected{{ } }}>{{=i}}</option>
            {{ } }}
        {{}else{}}
            <option value="">暂无</option>
        {{}}}
    </script>
    <script>
        // 页面初始化
            var address_list = <{$address}>;console.log(address_list)
            var evaladdress = doT.template($("#address_template").text());
            var evalarea = doT.template($("#area_template").text());
            var evalToast = doT.template($("#toast_template").text());
            loaddata(".address_list",evaladdress,address_list);
            loadheadbar("地址管理");
        // 是否选择地址
            if(GetQueryString("type") && GetQueryString("type") == "select"){
                $(".address_select").click(function(){
                    location.href = "/shop/order/confirm?addressid="+$(this).data("id");
                })
            }
        // 编辑地址
            var evalinfo = doT.template($("#info_template").text());
            function edit(n){
                toggle_edit()
                loaddata(".edit_address",evalinfo,address_list[n]);
                level2({ele:".select",data1:data_city,data2:data_area,level1:address_list[n].province,level2:address_list[n].city,level3:address_list[n].area,func:evalarea})
            }
        // 新增地址
            function add(){
                console.log(window.history)
                toggle_edit()
                loaddata(".edit_address",evalinfo,{});
                level2({ele:".select",data1:data_city,data2:data_area,level1:'',level2:'',level3:'',func:evalarea})
            }
        // 设为默认
            function set_default(n){console.log(n)
                $.post("/business/user/address/setdef?id="+n,{_csrf:"<{$app->request->csrfToken}>"},function(res){console.log(res)
                    toast("ok",res.msg,function(){
                        location.href=""
                    });
                },"json")
            }
        // 删除地址
            function del(n){
                address_list.splice(parseInt(n),1);
                loaddata(".address_list",evaladdress,address_list);
                // ajax
                $.post("/business/user/address/delete?id="+n,{_csrf:"<{$app->request->csrfToken}>"},function(res){console.log(res)
                    toast("ok",res.msg,function(){
                        location.href=""
                    });
                },"json")
            }
        // 保存地址
            var submited = false;
            $(".edit_address").submit(function(e){
                e.preventDefault();
                with(this){
                    for (var i = 0; i < this.length; i++) {
                        if($(this[i]).attr("request")==""){
                            if(!checkone(this[i])){
                                return false;
                            }
                        }
                    }
                    if(submited) return false;
                    var data = $(".edit_address").serialize();
                    $.post("/business/user/address/post-address",data,function(res){console.log(res);
                        submited = true;
                        toast("attention",res.msg);
                        location.href='/business/user/address/index'
                    },"json")
                }
            })
        // 取消编辑
            function quit_edit(){
                window.history.go(-1)
            }
        // 页面切换
            function toggle_edit(){
                $(".address_list,.edit_address,.add_btn,.header,.head_edit").toggle();
            }
    </script>
</body>
</html>
